<style type="text/css">
  .qrcode {
    position: relative;
    width: 100px;
  }

  .qrcode .sizes {
    position: absolute;
    top: -78px;
    padding: 5px;
    background: #fff;
    border: 1px solid #ddd;
    display: none;
  }

  .qrcode:hover .sizes {
    display: block;
  }

  .qrcode .line {
    display: block;
    width: 100px;
    text-align: center;
  }

  .show-page-vue {
    height: 100%;
    width: 100%;
    background: #f3f3f3;
    display: flex;
    padding: 15px;
    color: #111;
    overflow-y: auto;
  }

  .show-page-vue .left-item-wraper {
    width: 25%;
    min-height: 100%;
  }

  .show-page-vue .right-item-wraper {
    width: 25%;
    min-height: 100%;
  }

  .show-page-vue .map-wraper {
    width: 50%;
    margin: 0 15px;
    min-height: 100%;
    background: #fff;
    border-radius: 5px;
  }

  .show-page-vue .left-top-box {
    background: #fff;
    border-radius: 5px;
    margin-bottom: 15px;
  }

  .show-page-vue .left-top-box .item-box {
    display: flex;
    padding: 15px 30px;
  }

  .show-page-vue .left-top-box .item-box img {
    width: 20%;
  }

  .show-page-vue .left-top-box .item-box .item {
    width: 40%;
    margin-left: 8%;
  }

  .show-page-vue .left-top-box .item-box .item .name {

  }

  .show-page-vue .left-top-box .item-box .item .num {
    font-size: 16px;
    color: #4e9de7;
  }

  .show-page-vue .left-top-box .item-box .item .num span {
    font-size: 22px;
    margin-right: 5px;
  }

  .show-page-vue .left-item-wraper .charts-box-wraper {
    padding-bottom: 15px;
  }

  .show-page-vue .right-item-wraper .charts-box-wraper {

  }

  .show-page-vue .bar-box-wraper {
    background: #fff;
    border-radius: 5px;
    padding: 15px 15px 15px 15px;
    height: 365px;
    margin-bottom: 15px;
  }

  .show-page-vue .bottom-bar-box {
    height: 182px;
    background: #fff;
    border-radius: 5px;
    padding: 15px 15px 15px 15px;
  }

  .show-page-vue .bar-box-wraper .bar-box {
    height: 49%;
    margin-bottom: 5%;
  }

  .show-page-vue .bottom-bar-box .bar-title {
    font-size: 18px;
    line-height: 1;
    padding-left: 5px;
    border-left: 3px solid #4598e5;
  }

  .show-page-vue .bottom-bar-box .bar-box {
    height: 100%;
  }

  .show-page-vue .bar-box-wraper .bar-box .bar-title {
    font-size: 18px;
    line-height: 1;
    padding-left: 5px;
    border-left: 3px solid #4598e5;
  }

  .show-page-vue .pie-box-wraper {
    height: 220px;
    background: #fff;
    border-radius: 5px;
    padding: 15px 15px 15px 15px;
  }

  .show-page-vue .pie-box-wraper .pie-box {
    height: 100%;
  }

  .show-page-vue .pie-box-wraper .pie-title {
    font-size: 18px;
    line-height: 1;
    padding-left: 5px;
    border-left: 3px solid #4598e5;
  }

  .show-page-vue {
  }

  .show-page-vue {
  }
</style>
<template>
  <div class="wrapper wrapper-content animated fadeInRight show-page-vue">
    <!-- <img src="../../assets/images/首页.gif" width="100%" height="50%"/> -->
    <div class="left-item-wraper">
      <div class="left-top-box">
        <div class="item-box">
          <img src="../../assets/images/icon/11.png">
          <div class="item">
            <p class="name">河段总数</p>
            <p class="num"><span>{{statsRiver}}</span>条</p>
          </div>
          <div class="item">
            <p class="name">湖库总数</p>
            <p class="num"><span>{{statsRreservoir}}</span>个</p>
          </div>
            <div class="item">
              <p class="name">渠道总数</p>
              <p class="num"><span>{{statsChannel}}</span>个</p>
            </div>
        </div>
        <div class="item-box">
          <img src="../../assets/images/icon/12.png">
          <div class="item">
            <p class="name">河长总数</p>
            <p class="num"><span>{{statsRiverSupervisor}}</span>人</p>
          </div>
          <div class="item">
            <p class="name">在线河长</p>
            <p class="num"><span>{{statsOnline}}</span>人</p>
          </div>
        </div>
      </div>
      <div class="charts-box-wraper">
        <div class="bar-box-wraper">
          <div class="bar-box">
            <p class="bar-title">{{yearNum}}年河长巡查率前5名</p>
            <chart-bar v-if="hasStats.statsInspectionRate0" :value="statsInspectionRate0"></chart-bar>
          </div>
          <div class="bar-box">
            <p class="bar-title">{{yearNum}}年河长巡查率后5名</p>
            <chart-bar v-if="hasStats.statsInspectionRate1" :value="statsInspectionRate1"></chart-bar>
          </div>
        </div>
        <div class="bottom-bar-box">
          <div class="bar-box">
            <p class="line-title">生态流量统计
              <select v-model="hpCd" @change="getFlowStat">
                <option value="511025000004">头滩水电站</option>
                <option value="511025000019">五里店水电站</option>
              </select>
            </p>
            <chart-line v-if="hasStats.statsPrecipitation" :colorA="color2" :value="statsPrecipitation"></chart-line>
          </div>
        </div>
      </div>
    </div>
    <div class="map-wraper" id="mapDiv"></div>
    <div class="right-item-wraper">
      <div class="charts-box-wraper">
        <div class="bar-box-wraper">
          <div class="bar-box">
            <p class="bar-title"><span v-text="yearNum"></span>年河长考核前5名</p>
            <chart-bar-value v-if="hasStats.statsExamine0" :value="statsExamine0"></chart-bar-value>
          </div>
          <div class="bar-box">
            <p class="bar-title"><span v-text="yearNum"></span>年河长考核后5名</p>
            <chart-bar-value v-if="hasStats.statsExamine1" :value="statsExamine1"></chart-bar-value>
          </div>
        </div>
      </div>
      <div class="pie-box-wraper">
        <div class="pie-box">
          <p class="pie-title">公共投诉统计</p>
          <chart-pie v-if="hasStats.statsComplaint" :colorA="color1" :value="statsComplaint"></chart-pie>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
  import '@/assets/css/style.css'
  import '@/assets/js/datepicker-vendor.js'
  import '@/assets/js/pageTag'
  import $ from '@/assets/js/jquery-vendor.js'
  import axios from 'axios';
  import Swal from 'sweetalert2'
  import {axiosContentType, site} from '@/assets/js/boss'
  import {mapGetters} from 'vuex'
  import chartPie from '@/components/charts/pie.vue'
  import chartLine from '@/components/charts/line.vue'
  import chartBar from '@/components/charts/bar.vue'
  import chartBar2 from '@/components/charts/bar2.vue'
  import chartBarValue from '@/components/charts/barValue.vue'

  export default {
    components: {
      chartPie,
      chartBar,
      chartBar2,
      chartLine,
      chartBarValue
    },
    data() {
      return {
        hpCd: '511025000004',
        yearNum: null,
        color1: ['#50b5ed', '#5083ed', '#ed9750', '#d8d8d8'],
        color2: ['#ff6a64', '#09e0ff', '#6754dc'],
        hasStats: {
          statsPrecipitation: false,
          statsInspectionRate0: false,
          statsInspectionRate1: false,
          statsExamine0: false,
          statsExamine1: false,
          statsComplaint: false
        },
        statsRiver: 0, // 河段总数
        statsChannel: 0, // 渠道总数
        statsRreservoir: 0, // 湖库总数
        statsRiverSupervisor: 0, // 河长总数
        statsOnline: 0, // 在线河长
        statsPrecipitation: { // 生态流量统计（降水量）
          '1月': 7164,
          '2月': 7164,
          '3月': 7164,
          '4月': 7128,
          '5月': 7200,
          '6月': 7056,
          '7月': 7020,
          '8月': 7128,
          '9月': 7056,
          '10月': 7056,
          '11月': 7056,
          '12月': 7128
        },
        statsInspectionRate0: { // 河长巡查率 0:前5名
          '无数据1': 0,
          '无数据2': 0,
          '无数据3': 0,
          '无数据4': 0,
          '无数据5': 0
        },
        statsInspectionRate1: { // 河长巡查率 1:后5名
          '无数据1': 0,
          '无数据2': 0,
          '无数据3': 0,
          '无数据4': 0,
          '无数据5': 0
        },
        statsExamine0: { // 河长考核 0:前5名
          '无数据1': 0,
          '无数据2': 0,
          '无数据3': 0,
          '无数据4': 0,
          '无数据5': 0
        },
        statsExamine1: { // 河长考核 1:后5名
          '无数据1': 0,
          '无数据2': 0,
          '无数据3': 0,
          '无数据4': 0,
          '无数据5': 0
        },
        statsComplaint: [ // 公共投诉
          {value: 0, name: '无'}
        ],
        examineYear: null
      }
    },
    mounted() {
      let that = window.$vueApp = this
      let moment = require('moment');
      let date = new Date();
      // 年份
      that.yearNum = moment(date).format('YYYY');
      window.onresize = function () {
        $('.map-wraper').height($('.left-item-wraper .left-top-box').height() + $('.left-item-wraper .charts-box-wraper').height() + 15);
      };

      // 地图加载
      this.$store.dispatch('Init_Api').then(res => {
        that.mapLoad();
      })
      window.onresize();
      that.getStatsAll();
      that.getFlowStat();
    },
    computed: {
      ...mapGetters([
        'TDTWMTSLayer', 'Extent', 'Map', 'GraphicsLayer', 'TDTLyr', 'TDTAnnoLayer', 'ArcGISDynamicMapServiceLayer'
      ])
    },
    methods: {
      getStatsAll() { // 综合统计
        let that = this;
        axios.post(site.stats.all
          , {}
          , axiosContentType.xWwwFormUrlencoded
        ).then(function (response) {
          const result = response.data;
          if (result.code === 0) {
            var dataMap = result.data;
            // 河段总数
            that.statsRiver = dataMap.statsRiver;
            // 渠道总数
            that.statsChannel = dataMap.statsChannel;
            // 湖库总数
            that.statsRreservoir = dataMap.statsRreservoir;
            // 河长总数
            that.statsRiverSupervisor = dataMap.statsRiverSupervisor;
            // 在线河长
            that.statsOnline = dataMap.statsOnline;
            // 河长巡查率 /0:前5名
            that.hasStats.statsInspectionRate0 = true;
            if (dataMap.statsInspectionRate0) {
              let rate = dataMap.statsInspectionRate0;
              let data = {};
              for (let i = 0; i < rate.length; i++) {
                let name = rate[i].areaName;
                let val = rate[i].rate;
                data[name] = val;
              }
              that.statsInspectionRate0 = data;
            }
            // 河长巡查率 /1:后5名
            that.hasStats.statsInspectionRate1 = true;
            if (dataMap.statsInspectionRate1) {
              let rate = dataMap.statsInspectionRate1;
              let data = {};
              for (let i = 0; i < rate.length; i++) {
                let name = rate[i].areaName;
                let val = rate[i].rate;
                data[name] = val;
              }
              that.statsInspectionRate1 = data;
            }
            // 河长考核 /0:前5名
            that.hasStats.statsExamine0 = true;
            if (dataMap.statsExamine0) {
              that.statsExamine0 = dataMap.statsExamine0;
            }
            // 河长考核 /1:后5名
            that.hasStats.statsExamine1 = true;
            if (dataMap.statsExamine1) {
              that.statsExamine1 = dataMap.statsExamine1;
            }
            that.examineYear = dataMap.examineYear;
            // 公共投诉
            that.hasStats.statsComplaint = true;
            if (dataMap.statsComplaint) {
              that.statsComplaint = dataMap.statsComplaint;
            }
            // 生态流量统计（降水量）
            that.hasStats.statsPrecipitation = true;
            if (dataMap.statsPrecipitation) {
              that.statsPrecipitation = dataMap.statsPrecipitation;
            }
          } else {
            Swal.fire(result.message);
          }
        }).catch(err => {
          console.error(err);
          that.hasStats.statsInspectionRate0 = true;
          that.hasStats.statsInspectionRate1 = true;
          that.hasStats.statsExamine0 = true;
          that.hasStats.statsExamine1 = true;
          that.hasStats.statsComplaint = true;
          that.hasStats.statsPrecipitation = true;
          Swal.fire(err.message);
        });
      },
      mapLoad: function () {
        // 地图相关操作
        var map;
        /*
               * 初始化地图控件，并大致指定地图显示范围为资中
               */
        map = new this.Map('mapDiv', {
          logo: false,
          slider: false,
          nav: false,
          zoom: 10,
          maxZoom: 10,
          minZoom: 10,
          showLabels: true, // 非常重要；显示标注用
          extent: new this.Extent({
            xmin: 104.253301,
            ymin: 29.461215,
            xmax: 105.336828,
            ymax: 30.138248,
            spatialReference: {
              wkid: 4490
            }
          })
        });
        /*
               * 加载天地图
               */
        var baseLayer = new this.TDTLyr();
        var layer = new this.ArcGISDynamicMapServiceLayer(window.map_arcgis + '/rest/services/XXZQH/MapServer', {
          'id': '资中县行政区划'
        });
        // map.addLayer(baseLayer1, 2);

        map.addLayer(baseLayer, 0);
        map.addLayer(layer, 5);
        // map.addLayer(layer, 3);
      },
      // 电站流量统计图数据
      getFlowStat: function() {
        let that = this;
        let moment = require('moment');
        document.cookie = 'hzbBs=true;';
        axios.post(`//39.98.203.5:9090/web/flow/list?pageNum=1&pageSize=10&sortColumn=createTime&sortDir=desc&hpCd=${that.hpCd}`,
          {headers: {'Content-Type': 'application/x-www-form-urlencoded'}}
        ).then(function (result) {
          if (result.status === 200 && result.data.code === 0) {
            let map = {};
            var list = result.data.data.list.reverse();
            for (let i in list) {
              let time = moment(list[i].createTime).format('HH:mm:ss');
              let val = Number(list[i].flow);
              map[time] = val;
            }
            that.statsPrecipitation = map;
          }
        });
      }
    }
  }
</script>
